<template>
  <div class="footer">
    <div class="colortitle">
      <p>{{ $t("language.footer.footeritem1.title") }}</p>
      <div>
        <span>{{ $t("language.footer.footeritem1.item1") }}</span>
        <span>{{ $t("language.footer.footeritem1.item2") }}</span>
        <span>{{ $t("language.footer.footeritem1.item3") }}</span>
        <span>{{ $t("language.footer.footeritem1.item4") }}</span>
        <span>{{ $t("language.footer.footeritem1.item5") }}</span>
        <span>{{ $t("language.footer.footeritem1.item6") }}</span>
        <span>{{ $t("language.footer.footeritem1.item7") }}</span>
        <span>{{ $t("language.footer.footeritem1.item8") }}</span>
        <span>{{ $t("language.footer.footeritem1.item9") }}</span>
        <span>{{ $t("language.footer.footeritem1.item10") }}</span>
      </div>
    </div>
    <div class="colortitle">
      <p>{{ $t("language.footer.footeritem2.title") }}</p>
      <div>
        <span>{{ $t("language.footer.footeritem2.item1") }}</span>
        <span>{{ $t("language.footer.footeritem2.item2") }}</span>
      </div>
    </div>
    <div class="colortitle">
      <p>{{ $t("language.footer.footeritem3.title") }}</p>
      <div>
        <img v-lazy="getImg('c27.jpg')" alt="" />
        <img v-lazy="getImg('c28.png')" alt="" />
        <img v-lazy="getImg('c29.png')" alt="" />
      </div>
    </div>
    <dl>
      <dd>
        <img v-lazy="getImg('1.png')" alt="" />
        <img v-lazy="getImg('2.png')" alt="" />
        <img v-lazy="getImg('3.png')" alt="" />
        <img v-lazy="getImg('4.png')" alt="" />
        <img v-lazy="getImg('5.png')" alt="" />
        <img v-lazy="getImg('6.png')" alt="" />
      </dd>
    </dl>
    <div class="bottomlogo">
      <img v-lazy="getImg('world.png')" alt="" />
      <p>{{ $t("language.footer.footertext") }}</p>
      <p class="last">{{ $t("language.footer.version") }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
const getImg = (url) => {
  return new URL(`../assets/img/${url}`, import.meta.url).href;
};
</script>

<style scoped lang="scss">
.footer {
  width: 100%;
  min-height: 180px;
  padding: 50px 20px 40px;
  background: #1a1c20;
  .colortitle {
    p {
      margin-top: 11px;
      color: #33961c;
      margin-bottom: 8px;
    }

    div {
      span {
        display: inline-block;
        font-size: 14px;
        color: #b5bac8;
      }
      span {
        margin-right: 20px;
        padding: 8px 0;
      }
      img {
        width: 40px;
        height: 40px;
        margin: 8px 16px 0 0;
        border-radius: 5px;
      }
    }
  }
  dl {
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding: 15px 0;
    margin-top: 20px;
    dd {
      @include flex(row, space-around, center);
      flex-wrap: wrap;

      img {
        height: 40px;
        margin: 0 10px;
      }
    }
  }
}
.bottomlogo {
  @include flex(column, flex-start, center);
  img {
    margin-top: 15px;
  }

  p {
    color: #b5bacb;
    font-size: 16px;
    margin-top: 15px;
  }
  .last {
    font-size: 12px;
  }
}
</style>
